<template>
  <div class="w-[80%] flex flex-col justify-start items-center m-auto">
    <div class="flex justify-center items-center">
      <h3 class="text-2xl font-medium">{{ $t("biddingMode.NewTrend") }}</h3>
    </div>
    <div class="flex justify-start items-center mt-20 newTrend-content">
      <img
        src="@/assets/images/biddingMode/15.png"
        alt=""
        style="height: 380px"
      />
      <div class="flex flex-col justify-center items-center py-1">
        <div class="item flex flex-col justify-center items-center">
          <div class="flex justify-start items-center">
            <img
              src="@/assets/images/biddingMode/01.png"
              alt=""
              style="width: 28px"
            />
            <div>
              <h3 class="font-medium mb-2">{{ $t("biddingMode.Global") }}</h3>
              <p>
                {{ $t("biddingMode.GlobalTips") }}
              </p>
            </div>
          </div>
        </div>
        <div class="item flex flex-col justify-center items-center">
          <div class="flex justify-start items-center">
            <img src="@/assets/images/biddingMode/02.png" alt="" />
            <div>
              <h3 class="font-medium mb-2">
                {{ $t("biddingMode.Collaboration") }}
              </h3>
              <p>
                {{ $t("biddingMode.CollaborationTips") }}
              </p>
            </div>
          </div>
        </div>
        <div class="item flex flex-col justify-center items-center">
          <div class="flex justify-start items-center">
            <img src="@/assets/images/biddingMode/03.png" alt="" />
            <div>
              <h3 class="font-medium mb-2">
                {{ $t("biddingMode.cooperation") }}
              </h3>
              <p>
                {{ $t("biddingMode.cooperationTips") }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup></script>
<style lang="scss" scoped>
.newTrend-content {
  height: 320px;
  width: 80%;
  img {
    width: 45%;
    height: 100%;
    margin-right: 4%;
  }
  .item {
    margin-bottom: 6%;
    img {
      width: 32px;
    }
    p {
      color: #727275;
      font-size: 14px;
    }
  }
}
</style>
